<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>群聊消息</title>
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--页面共同的CSS，JS-->
    <script src="../../res/js/common/newCommonCssJS.js"></script>
    <link rel="stylesheet" href="../../res/css/messages/group.css">
</head>

<body>
<!--导航部分-->
<section class="indexNav">
    <img id="goBack" class="back" src="../../res/img/common/back.png" alt="">
    <div id="groupTitle" class="title">群消息</div>
    <img class="ltsz" src="../../res/img/messages/lysz.png" alt="">
</section>
<section class="indexChat">
    <div class="indexChatWrap">
        <ul id="chatList" class="chatList">
<!--                            <li class="time">10:40</li>-->
<!--                            <li class="noMeLi">-->

<!--                                <div class="pic">-->
<!--                                    <img src="../../res/img/eggTV/1.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="noMeNickName">4687dawwda</div>-->
<!--                                <div class="chatContent">-->
<!--                                    <img style="margin-left: -0.8rem" src="../../res/img/messages/bsj.png" alt="">-->
<!--                                    说点废话填充一下~说点废话填充一下说点废话填充一下……-->
<!--                                </div>-->
<!--                            </li>-->
            <!--                <li class="noMeFileLi">-->

            <!--                    <div class="pic">-->
            <!--                        <img src="../../res/img/eggTV/1.png" alt="">-->
            <!--                    </div>-->
            <!--                    <div class="chatContent">-->
            <!--                        <img style="margin-left: -0.8rem" src="../../res/img/messages/bsj.png" alt="">-->
            <!--                        <p class="fileName">文件名aaaaaaaaa.txt</p>-->
            <!--                        <p class="size">4.8MB</p>-->
            <!--                    </div>-->
            <!--                </li>-->
            <!--                <li class="meFileLi">-->

            <!--                    <div class="pic">-->
            <!--                        <img src="../../res/img/eggTV/1.png" alt="">-->
            <!--                    </div>-->
            <!--                    <div class="chatContent">-->
            <!--                        <img style="float: right;margin-right: -0.8rem;" src="../../res/img/messages/hsj.png" alt="">-->
            <!--                        <p class="fileName">文件名aaaaaaaaa.txt</p>-->
            <!--                        <p class="size">4.8MB</p>-->
            <!--                    </div>-->
            <!--                </li>-->
            <!--                <li class="imgLi">-->
            <!--                    <div class="pic">-->
            <!--                        <img src="../../res/img/eggTV/1.png" alt="">-->
            <!--                    </div>-->
            <!--                    <div class="chatContent">-->
            <!--                        <img style="margin-left: -0.8rem" src="../../res/img/messages/bsj.png" alt="">-->
            <!--                        <img src="../../res/img/eggTV/1.png" alt="">-->
            <!--                    </div>-->

            <!--                </li>-->
            <!--                <li class="time">10:40</li>-->
<!--                            <li class="meLi">-->
<!--                                <div class="pic">-->
<!--                                    <img src="../../res/img/eggTV/1.png" alt="">-->
<!--                                </div>-->
<!--                                <div class="meNickName">4687dawwda</div>-->
<!--                                <div class="chatContent">-->
<!--                                    <img style="float: right;margin-right: -0.8rem;" src="../../res/img/messages/hsj.png" alt="">-->
<!--                                    说点废话填充一下~说点废话填充一下说点废话填充一下……-->
<!--                                </div>-->
<!--                            </li>-->
        </ul>
    </div>
    <div class="indexBottom">
        <div class="indexChatSendMessage">
            <div id="messageInput" class="messageInput" contenteditable="true"></div>
            <div id="messageBtn" class="messageBtn" >发送</div>
        </div>
        <div class="sendPic">
            <div id="sendImg" class="sendCommon sendImg">
<!--                <label id="chat-tuxiang" title="发送图片" for="inputImage1" class="btn-default-styles">-->
<!--                    <input type="file" accept="image/*" name="file" class="inputImage" id="inputImage1">-->
<!--                    <img src="../../res/img/messages/pic.png" alt="">-->
<!--                </label>-->
                <img src="../../res/img/messages/pic.png" alt="">
            </div>
            <div id="shootImg" class="sendCommon">
<!--                <label title="拍摄图片" for="inputImage2" class="btn-default-styles">-->
<!--                    <input type="file" accept="image/*" name="file" class="inputImage" id="inputImage2" capture="camera">-->
<!--                    <img src="../../res/img/messages/XJ.png" alt="">-->
<!--                </label>-->
                <img src="../../res/img/messages/XJ.png" alt="">
            </div>
<!--            <div class="sendCommon">-->
<!--&lt;!&ndash;                <label title="发送文件" for="inputImage3" class="btn-default-styles">&ndash;&gt;-->
<!--&lt;!&ndash;                    <input type="file" name="file" class="inputImage" accept=".xls,.doc,.txt,.pdf" id="inputImage3">&ndash;&gt;-->
<!--&lt;!&ndash;                    <img src="../../res/img/messages/WJ.png" alt="">&ndash;&gt;-->
<!--&lt;!&ndash;                </label>&ndash;&gt;-->
<!--                <img src="../../res/img/messages/WJ.png" alt="">-->
<!--            </div>-->
            <!--                <div class="sendCommon">-->
            <!--                    <img src="../../res/img/messages/BQ.png" alt="">-->
            <!--                </div>-->
        </div>
        <!--            <div id="preview" class="preview">-->
        <!--                <div class="previewImg">-->
        <!--                    <img src="../../res/img/eggTV/1.png" alt="">-->
        <!--                </div>-->
        <!--            </div>-->
        <!--            <div id="sendPicBtn" class="sendPicBtn">发送图片</div>-->
        <!--            <div style="margin-right: 0.5rem" id="noSendPicBtn" class="sendPicBtn">取消发送</div>-->
        <!--            <div id="sendFileBtn" class="sendPicBtn">发送文件</div>-->
        <!--            <div style="margin-right: 0.5rem" id="noSendFileBtn" class="sendPicBtn">取消发送</div>-->
    </div>
</section>
</body>
<script src="../../res/js/messages/jmessage-sdk-web.2.6.0.min.js"></script>
<script src="../../res/js/common/IMCommon.js"></script>
<script src="../../res/js/vconsole.min.js"></script>
<script src="../../res/js/messages/groupV2.js"></script>
<script>
    // let cConsole = new VConsole();
</script>
<script>
    let indexChatHeight = $('.indexChat').height();
    let indexBottomHeight = $('.indexBottom').height();
    let indexNavHeight = $('.indexNav').height();
    let indexChatWrapHeight = indexChatHeight - indexBottomHeight - indexNavHeight - 30;
    $('.indexChatWrap,.chatList').css('height',indexChatWrapHeight);
    $('.indexChatWrap').css('margin-top',indexNavHeight);
    //聊天框默认最底部
    $(document).ready(function () {
        $(".chatList").scrollTop($(".chatList")[0].scrollHeight);
    });


    // 预览图片
    $('#inputImage1').on('change',function () {
        $('#preview').removeClass('inputImage2').addClass('inputImage1')
    });
    $('#inputImage2').on('change',function () {
        $('#preview').removeClass('inputImage1').addClass('inputImage2')
    });
    function selectImg(pic) {
        // if (!pic.files || !pic.files[0]) {
        //     return;
        // }
        // if ($('#preview .previewImg').length > 0){
        //     laymsg('最多发送1张图片');
        //     return;
        // }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;
            $('#preview').empty().append('<div class="previewImg">' +
                '                    <img src="'+images+'" alt="">' +
                '                </div>').show();

            $('#sendPicBtn,#noSendPicBtn').show();

            let indexBottomHeight = $('.indexBottom').height();
            let indexChatWrapHeight = indexChatHeight - indexBottomHeight - 30;
            $('.indexChatWrap,.chatList').css('height',indexChatWrapHeight);
            $(document).ready(function () {
                $(".chatList").scrollTop($(".chatList")[0].scrollHeight);
            });
        };
        reader.readAsDataURL(pic.files[0]);
    }
</script>
</html>